import { Link } from '@brillout/docpress'
import { TextEnv } from './TextEnv'
import { HooksLifecycle } from './HooksLifecycle'
import { Box } from '../../components'

List of built-in hooks. (You can <Link href="/meta">create your own</Link>.)

See also: <Link href="/settings" />.


## Basics

- [**`data()`**](/data): <TextEnv>server (configurable)</TextEnv> Called before the page is rendered, for fetching data.
- [**`guard()`**](/guard): <TextEnv>server (configurable)</TextEnv> Protect pages from unprivileged access.
- [**`onHydrationEnd()`**](/onHydrationEnd): <TextEnv>client</TextEnv> Called after the page is <Link href="/hydration">hydrated</Link>.
- [**`onPageTransitionStart()`**](/onPageTransitionStart): <TextEnv>client</TextEnv> Called upon page navigation, before the new page starts rendering.
- [**`onPageTransitionEnd()`**](/onPageTransitionEnd): <TextEnv>client</TextEnv> Called upon page navigation, after the new page has finished rendering.
- [**`onCreatePageContext()`**](/onCreatePageContext): <TextEnv>server & client</TextEnv> Hook called when a <Link href="/pageContext">`pageContext` object</Link> is created.
- [**`onCreateGlobalContext()`**](/onCreateGlobalContext): <TextEnv>server & client</TextEnv> Hook called when the <Link href="/globalContext">`globalContext` object</Link> is created.

**Pre-rendering**

- [**`onBeforePrerenderStart()`**](/onBeforePrerenderStart): <TextEnv>server</TextEnv> Called before the whole <Link href="/pre-rendering">Pre-rendering</Link> process starts.
- [**`onPrerenderStart()`**](/onPrerenderStart): <TextEnv>server</TextEnv> Global hook called when <Link href="/pre-rendering">Pre-rendering</Link> starts.

**`vike-vue`**

- [**`onCreateApp()`**](/onCreateApp): <TextEnv>server & client</TextEnv> <Link href="/vike-vue">`vike-vue`</Link> Called after creating Vue's `app` instance.



## Advanced

> Most users don't need to know about these hooks.

- [**`onData()`**](/onData): <TextEnv>server & client</TextEnv> Called as soon as <Link href="/pageContext#data">`pageContext.data`</Link> is available.
- [**`onBeforeRender()`**](/onBeforeRender): <TextEnv>server (configurable)</TextEnv> Called before the page is rendered, lower-level and usually for advanced integrations with data fetching tools.
- [**`onRenderHtml()`**](/onRenderHtml): <TextEnv>server</TextEnv> Called when a page is rendered to HTML on the server-side.
- [**`onRenderClient()`**](/onRenderClient): <TextEnv>client</TextEnv> Called when a page is rendered on the client-side.
- [**`onBeforeRoute()`**](/onBeforeRoute): <TextEnv>server & client</TextEnv> Called before the URL is routed to a page.
- [**`onBeforeRenderClient()`**](/onBeforeRenderClient): <TextEnv>client</TextEnv> Called at the beginning of <Link href="/onRenderClient">`onRenderClient()`</Link>.
- [**`onAfterRenderClient()`**](/onAfterRenderClient): <TextEnv>client</TextEnv> Called at the end of <Link href="/onRenderClient">`onRenderClient()`</Link>.
- [**`onBeforeRenderHtml()`**](/onBeforeRenderHtml): <TextEnv>server</TextEnv> Called at the beginning of <Link href="/onRenderHtml">`onRenderHtml()`</Link>.
- [**`onAfterRenderHtml()`**](/onAfterRenderHtml): <TextEnv>server</TextEnv> Called at the end of <Link href="/onRenderHtml">`onRenderHtml()`</Link>.



## Upcoming

Potentially upcoming hooks:
- [Feature Request #1979 — New hook `onRenderHtmlEnd()`](https://github.com/vikejs/vike/issues/1979)
- [Feature Request #1438 — New hook `onLog()`](https://github.com/vikejs/vike/issues/1438)
- [Feature Request #1525 — New hook `onRenderContent()`: generate non-HTML files with arbitrary content](https://github.com/vikejs/vike/issues/1525)


## Lifecycle

The order in which hooks are called upon rendering a page. (The hook flow.)

<HooksLifecycle />

> **Data hook environment**
>
> Select the following:
> - `Server-only (default)` if you use `+data.js` or `+onBeforeRender.js`. (They run only on the server.)
> - `Client-only` if you use <Link href="/data#environment">`+data.client.js`</Link> or <Link href="/onBeforeRender#environment">`+onBeforeRender.client.js`</Link>. (They run only on the client.)
> - `Server & client` if you use `+data.shared.js` or `+onBeforeRender.shared.js`. (They run on both the server and the client.)

> <Link href="/routing">Routing</Link> executes the <Link href="/route-function">Route Function</Link> of all your pages.

> See also:
> - <Link href="/pageContext#lifecycle" />
> - <Link href="/globalContext#lifecycle" />


## See also

 - <Link href="/settings" />
 - <Link href="/config" />
